<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/log.css" />
  </head>
  <style>
    .box {
      height: 800px;
    }
    .box1 {
      width: 950px;
    }
    .text {
      color: red;
    }
  </style>
  <body>
    <div class="box">
      <div class="box1">
        <a href="index.html"
          ><img src="../img/logo3.png" alt="log" class="im" /></a
        ><span class="yh">&nbsp;&nbsp;用户登录</span>
      </div>
      <div class="yhdl">
        <div class="yhdl1"></div>
        <div class="yhdl2">
          <a href="#"><h2 id="c1">账号密码登录</h2></a>
          <a href="#"><h2 id="cc">手机动态码登录</h2></a>
          <div style="clear: both"></div>
          <div class="tto">
            <p><span></span><input type="text" placeholder="请输入用户名" /></p>
            <p><span></span><input type="password" /></p>
            <p><span> 验证码：</span><input type="text" /></p>
            <p>
              <a href="#" class="print">换一个</a><span class="text"></span>
            </p>
            <div style="clear: both"></div>
            <p><input type="checkbox" />自动登录</p>
            <p>
              <a href="#">忘记密码</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span
              ><a href="zuche.html">免费注册</a>
            </p>
            <div style="clear: both" id="ying">
              请输入用户名或者邮箱或者手机号！
            </div>
            <p><input type="button" value="登录" /></p>
            <div style="clear: both"></div>
            <p>——————————使用合作网站帐号登录——————————</p>
            <!-- <div style="clear: both"></div> -->
            <p>
              <a href="#">支付宝</a> | <a href="#">新浪微博</a> |
              <a href="#">微信</a>
            </p>
          </div>
          <div class="tt1" style="display: none">
            <p><span></span><input type="text" placeholder="请输入手机号" /></p>
            <p><input type="text" placeholder="短信验证码" /></p>
            <p><input type="button" value="获取验证码" /></p>
            <div style="clear: both"></div>
            <p><input type="checkbox" />自动登录</p>
            <p><input type="button" value="登录" /></p>
            <div style="clear: both"></div>
            <p>——————————使用合作网站帐号登录——————————</p>
            <!-- <div style="clear: both"></div> -->
            <p>
              <a href="#">支付宝</a> | <a href="#">新浪微博</a> |
              <a href="#">微信</a>
            </p>
          </div>
          <!-- 
          
           -->
        </div>
      </div>
      <div class="dibu">
        <ul>
          <li><a href="#">关于波奇</a><span>|</span></li>
          <li><a href="#">投资者关系</a><span>|</span></li>
          <li><a href="#">诚聘英才</a><span>|</span></li>
          <li><a href="#">联系我们</a><span>|</span></li>
          <li><a href="#">网站地图</a><span>|</span></li>
          <li><a href="#">意见反馈</a><span>|</span></li>
          <li><a href="#">帮助中心</a><span>|</span></li>
          <li style="width: 170px">客服热线：400-820-6098</li>
        </ul>
        <ul>
          <li><a href="#">沪公网安备 31011502004955号</a><span>|</span></li>
          <li><a href="#">沪ICP备13034501号-2</a><span>|</span></li>
          <li style="width: 160px">增值电信业务经营许可证：</li>
          <li style="width: 130px"><a href="#"> 沪B2-20140120</a></li>
        </ul>
        <br />
        <p>
          Copyright © 2007- 2021 Boqii.com All Rights Reserved
          光橙（上海）信息科技有限公司 版权所有
        </p>
        <ul>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
        </ul>
        <p>
          违法和不良信息举报电话：<a href="#">021-68826169</a
          >&nbsp;|&nbsp;举报邮箱：<a href="#">zhengls@boqii.com</a>
        </p>
        <p>如网民接到962110电话，请立即接听</p>
      </div>
    </div>
    <script>
      let c1 = document.querySelector("#c1");
      let cc = document.querySelector("#cc");
      let tto = document.querySelector(".tto");
      let tt1 = document.querySelector(".tt1");
      cc.onclick = function () {
        tto.style.display = "none";
        tt1.style.display = "block";
        cc.style.borderBottom = "5px solid orangered";
        c1.style.borderBottom = "0px solid orangered";
      };
      c1.onclick = function () {
        tto.style.display = "block";
        tt1.style.display = "none";
        c1.style.borderBottom = "5px solid orangered";
        cc.style.borderBottom = "0px solid orangered";
      };

      //1-给注册按钮添加事件
      let ipts = document.querySelectorAll("input");
      ipts[4].onclick = function () {
        let uname = ipts[0].value;
        let pd = ipts[1].value;
        //2-请求
        let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
        axios
          .get(loginAPI, { params: { username: uname, password: pd } })
          .then((r) => {
            console.log(r.data);
            alert(r.data.msg);
            if (r.data.code == 1) {
              let { id, token, username } = r.data.data;
              localStorage.setItem("id", id);
              localStorage.setItem("token", token);
              localStorage.setItem("username", username);
              location.href = "index.html";
            }
          });
      };
      // 随机验证码
      function random_str(length) {
        var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        ALPHABET += "abcdefghijklmnopqrstuvwxyz";
        ALPHABET += "0123456789";
        var str = "";
        for (var i = 0; i < length; ++i) {
          var rand = Math.floor(Math.random() * ALPHABET.length);
          str += ALPHABET.substring(rand, rand + 1);
        }
        return str;
      }

      $(".print").click(() => {
        let text = random_str(4);
        $(".text").text(text);
      });
    </script>
  </body>
</html>
